<template>
  <div class="broken-line-box">
    <v-chart :options="option" />
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'

export default {
  components: {
    'v-chart': ECharts
  },
  props: {
    lineData: {
      type: Object,
      required: true
    }
  },
  data() {
    const data = []
    for (let i = 0; i <= 360; i++) {
      const t = i / 180 * Math.PI
      const r = Math.sin(2 * t) * Math.cos(2 * t)
      data.push([r, i])
    }
    return {
      option: {
        backgroundColor: '#fff',
        title: {
          text: this.lineData.title,
          left: '18px',
          top: '0',
          textStyle: {
            color: '#999',
            fontSize: 12,
            fontWeight: '400'
          }
        },
        color: this.lineData.color,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            },
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        grid: {
          left: '25',
          right: '25',
          bottom: '24',
          top: '75',
          containLabel: true
        },
        legend: {
          data: this.lineData.lable,
          orient: 'horizontal',
          icon: 'rect',
          show: true,
          left: 20,
          top: 25
        },
        xAxis: {
          type: 'category',
          data: this.lineData.xTime,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          // max: max_value>=100? max_value + 100: max_value+10,
          // max: max_value > 100 ? max_value * 2 : max_value + 10,
          // interval: 10,
          // nameLocation: "center",
          axisLabel: {
            color: '#999',
            textStyle: {
              fontSize: 12
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F3F4F4'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        series: this.lineData.yData
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  min-height: 280px;
  height: 100%;
}

.broken-line-box{
    width: 100%;
    height: auto;
}
</style>
